<template>
  <div class="dept-card" :style="{'margin-left': level * 15 + 'px'}">
    <el-card shadow="hover" class="mobile-card">
      <div class="mobile-card-header">
        <div class="card-title">
          <span class="name">{{ dept.name }}</span>
        </div>
        <div class="status-badge" :class="statusClass">
          {{ statusText }}
        </div>
      </div>
      
      <div class="mobile-card-info">
        <div class="info-item">
          <span class="info-label">排序：</span>
          <span class="info-value">{{ dept.sort }}</span>
        </div>
        <div v-if="dept.owner" class="info-item">
          <span class="info-label">负责人：</span>
          <span class="info-value">{{ dept.owner }}</span>
        </div>
      </div>
      
      <div v-if="expanded" class="mobile-card-detail">
        <div v-if="dept.phone" class="info-item">
          <span class="info-label">联系电话：</span>
          <span class="info-value">{{ dept.phone }}</span>
        </div>
        <div v-if="dept.email" class="info-item">
          <span class="info-label">邮箱：</span>
          <span class="info-value">{{ dept.email }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">创建时间：</span>
          <span class="info-value">{{ formatTime(dept.create_time) }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">更新时间：</span>
          <span class="info-value">{{ formatTime(dept.update_datetime) }}</span>
        </div>
      </div>
      
      <div class="mobile-card-actions">
        <div>
          <el-button v-if="hasChildren" type="text" @click="toggleExpand">
            {{ expanded ? '收起' : '详情' }}
          </el-button>
        </div>
        <div>
          <el-button type="text" icon="el-icon-edit" @click="handleUpdate" :style="{color: theme}"
            v-if="$parent.hasPermi(['permission:dept:{id}:put'])">修改</el-button>
          <el-button type="text" icon="el-icon-plus" @click="handleAdd" :style="{color: theme}"
            v-if="$parent.hasPermi(['permission:dept:post'])">新增</el-button>
          <el-button type="text" icon="el-icon-delete" @click="handleDelete" style="color: #F56C6C"
            v-if="dept.parentId != 0 && $parent.hasPermi(['permission:dept:{id}:delete'])">删除</el-button>
        </div>
      </div>
    </el-card>
    
    <!-- 递归渲染子部门 -->
    <div v-if="hasChildren && expanded" class="children-container">
      <dept-card 
        v-for="(item, index) in dept.children" 
        :key="index"
        :dept="item"
        :theme="theme"
        :level="level + 1"
        @update="childDept => $emit('update', childDept)"
        @add="childDept => $emit('add', childDept)"
        @delete="childDept => $emit('delete', childDept)"
      ></dept-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeptCard',
  props: {
    dept: {
      type: Object,
      required: true
    },
    theme: {
      type: String,
      default: '#409EFF'
    },
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      expanded: false
    }
  },
  computed: {
    hasChildren() {
      return this.dept.children && this.dept.children.length > 0;
    },
    statusText() {
      return this.dept.status === 1 ? '正常' : '停用';
    },
    statusClass() {
      return this.dept.status === 1 ? 'active' : 'inactive';
    }
  },
  methods: {
    toggleExpand() {
      this.expanded = !this.expanded;
    },
    formatTime(time) {
      if (!time) return '未知';
      const date = new Date(time);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    handleUpdate() {
      this.$emit('update', this.dept);
    },
    handleAdd() {
      this.$emit('add', this.dept);
    },
    handleDelete() {
      this.$emit('delete', this.dept);
    }
  }
}
</script>

<style lang="scss" scoped>
.dept-card {
  margin-bottom: 15px;
  
  .mobile-card {
    margin-bottom: 10px;
    border-radius: 8px;
    
    .mobile-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      
      .card-title {
        .name {
          font-weight: bold;
          font-size: 16px;
        }
      }
      
      .status-badge {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 4px;
        
        &.active {
          background-color: #f0f9eb;
          color: #67c23a;
        }
        
        &.inactive {
          background-color: #f4f4f5;
          color: #909399;
        }
      }
    }
    
    .mobile-card-info, .mobile-card-detail {
      .info-item {
        margin: 8px 0;
        font-size: 14px;
        display: flex;
        
        .info-label {
          color: #606266;
          margin-right: 5px;
          font-weight: bold;
        }
        
        .info-value {
          color: #303133;
        }
      }
    }
    
    .mobile-card-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      border-top: 1px solid #ebeef5;
      padding-top: 10px;
    }
  }
  
  .children-container {
    margin-left: 10px;
    border-left: 1px dashed #dcdfe6;
    padding-left: 5px;
  }
}
</style> 